will be called.

- useEffect with an empty array in its second argument gets called only the first time the component renders.

Analyze Code

const retrieveTodos = () => {

TodoDataService.getAll(props.token)

.then(response => {

setTodos(response.data);

})

.catch( e => {

console.log(e);

});

}

retrieveTodos calls TodoDataService.getAll() which if you remember, has the following implementation:

Analyze Code

getAll(token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.get('http://localhost:8000/api/todos/');

}

getAll returns a promise with the todos retrieved from the database and we set it to the todos state variable with

setTodos(response.data).

JSX Markup for Displaying Todos

Now, let’s display the list of todos like in figure 1.

Figure 1

todos-list.js

Add the code in bold below to return:

Modify Bold Code

…

import { Link } from 'react-router-dom';

import Card from 'react-bootstrap/Card';

import Container from 'react-bootstrap/Container';

import Button from 'react-bootstrap/Button';

const TodosList = props => {

const [todos, setTodos] = useState([]);

…

return (

<Container>

{todos.map((todo) => {

return (

<Card key={todo.id} className="mb-3">

<Card.Body>

<div>

<Card.Title>{todo.title}</Card.Title>